<template>
    <div>
        <div class="tab tab_on">
            <span class="tab_left tab_on_left">添加课程</span>
            <button class="tab_right tab_on_right"@click="rouBack"><i class="big el-icon-arrow-left"></i>返回</button>
            <button class="tab_right tab_on_right" @click="Refresh"><i class="big el-icon-refresh-left"></i>刷新</button>
        </div>
        <div id="add">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="课程类型" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择课程类型">
                        <el-option label="java入门" value="java入门"></el-option>
                        <el-option label="java高级" value="java高级"></el-option>
                        <el-option label="view入门" value="view入门"></el-option>
                        <el-option label="view高级" value="view高级"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="课程预览图：" id="supmeta">
                    <el-upload
                            ref="uploads"
                            multiple
                            :before-upload="beforeA"
                            :auto-upload="false"
                            action="http://localhost:8081/classify/addimg"
                            list-type="picture-card"
                            :on-success="uploadss"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>

                </el-form-item>
                <el-form-item label="课程介绍" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                </el-form-item>
                <el-form-item label="课程售价" prop="shoujia">
                    <el-input  v-model="ruleForm.shoujia"></el-input>
                </el-form-item>
                <el-form-item label="上架/下架" prop="delivery">
                    <el-switch v-model="ruleForm.delivery" active-value="2" inactive-value="3"></el-switch>
                </el-form-item>
                <el-form-item label="上传视频" required>
                    <el-upload style="margin-left:14%;margin-top:5%"
                               class="avatar-uploader el-upload--text"
                               ref="uploadVideo"
                               :drag="Plus"
                               :auto-upload="false"
                               action="http://localhost:8081/classify/addVideo"
                               multiple
                               :show-file-list="false"
                               :on-success="handleVideoSuccess"
                               :before-upload="beforeUploadVideo"
                               :on-preview="handleVideoCardPreview"
                               :on-progress="uploadVideoProcess">
                        <i v-if="Plus" class="el-icon-upload"></i>
                        <div v-if="Plus" class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisibleVideo" append-to-body>
                        <video width="100%" controls="controls" :src="dialogVideoUrl"></video>
                    </el-dialog>
                </el-form-item>
                <el-form-item label="课程备注" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.beizhu"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        inject:['reload'],
        data() {
            return {
                courseId:'',
                ruleForm: {
                    region: '',//课程类型
                    name: '',//课程名称
                    desc: '',//课程介绍
                    shoujia:'',//课程售价
                    delivery: '',//上架/下架
                    beizhu:''//课程备注
                },
                rules: {
                    name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                    ],
                    region: [
                        { required: true, message: '请选择课程类型', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请填写课程介绍', trigger: 'blur' }
                    ],
                    shoujia: [
                        { required: true, message: '请填写课程售价', trigger: 'blur' }
                    ],
                    beizhu: [
                        { required: true, message: '请填写课程备注', trigger: 'blur' }
                    ]
                },
                //视频上传
                videoFlag: false,
                Plus: true,
                videoUploadPercent: 0,
                dialogVideoUrl: '',
                dialogVisibleVideo: false,
                //课程图片上传
                dialogImageUrl: '',
                dialogVisible: false,
            };
        },
        methods: {
            //刷新页面
            Refresh(){
                this.reload();
            },
            //返回上一页
            rouBack(){
                this.$router.back()
            },
            //视频上传
            // 视频上传前执行
            beforeUploadVideo (file) {
                const isLt300M = file.size / 1024 / 1024 < 11000;
                if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) === -1) {
                    this.$message.error('请上传正确的视频格式');
                    return false;
                }
                if (!isLt300M) {
                    this.$message.error('上传视频大小不能超过300MB哦!');
                    return false;
                }
            },
            // 视频上传过程中执行
            uploadVideoProcess (event, file, fileList) {
                this.Plus = false;
                this.videoUploadPercent = file.percentage.toFixed(0);
            },
            handleVideoCardPreview(file){
                console.log(file,file.url)
                this.dialogVideoUrl = file.url;
                this.dialogVisibleVideo = true;
            },
            // 视频上传成功是执行
            handleVideoSuccess (res, file) {
                this.videoUploadPercent = 100;
                console.log(res);
                // 如果为200代表视频保存成功
                if (file.status === 'success') {
                    // 接收视频传回来的名称和保存地址
                    // 至于怎么使用看你啦~
                    this.$message.success('视频上传成功！')
                } else {
                    this.$message.error('视频上传失败，请重新上传！')
                }
            },
            //课程图片上传
            beforeA(file){
                //设置文件格式
                //const isPDF = file.type === 'application/jpg';
                //设置文件大小限制
                const isLt10M = file.size / 1024 / 1024 < 10;
                /*if (!isPDF) {
                    this.$message.error('上传的文件只能是 PDF 格式!');
                    return false;
                }*/
                if (!isLt10M) {
                    this.$message.error('上传的文件大小不能超过 10MB!');
                }
                return true;
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            uploadss(res){
                this.$http.get("/classify/uploadPictureUrl",{
                    params:{
                        courseId:this.courseId,
                        url:res
                    }
                }).then(res => {
                    if(res.data == 1){
                        alert("图片添加成功")
                    }
                });
            },
            //课程添加
            submitForm(formName) {
                this.$refs.uploadVideo.submit();
                this.$refs.uploads.submit();
                let url = "/classify/add";
                var data = new URLSearchParams();
                data.append("courseInfo",this.ruleForm.region);//课程类型
                data.append("courseName",this.ruleForm.name);//课程名称
                data.append("courseIntro",this.ruleForm.desc);//课程介绍
                data.append("coursePrice",this.ruleForm.shoujia);//课程售价
                data.append('courseStatus',this.ruleForm.delivery);//上架/下架
                data.append('courseNo',this.ruleForm.beizhu);//备注
                this.$http.post(url,data,{
                    heanders:{
                        'C':'application/x-www-form-urlencoded'
                    }
                }).then(res =>{
                    console.log(res.data);
                    //alert("添加成功");
                    sessionStorage.setItem("id",res.data);
                    this.courseId=sessionStorage.getItem("id");

                })
                this.reload();
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                console.log(formName)
            }
        }
    }
</script>

<style scoped>
    .tab{
        height: 42px;
        background-color: #F3F3F3;
        border: 1px #E4E4E4 solid;
        line-height: 2.5;
    }
    #add{
        width:500px;
        background-color: #9FA7B4;
        padding: 20px 50px 20px 20px;
        margin: 0 auto;
        height: 700px;
    }
    .tab_on{
        margin: -20px 0px 12px -20px;
        padding: 0px 10px 4px 0px;
        width: 102%;
    }
    .tab_left{
        margin: 0px 0px 0px 9px;
        font-size: 13px;
    }
    .tab_on_left{
        color: #A2A2A2;
        font-size: 15px;
    }
    .tab_right{
        margin: 10px 15px 0px 0px;
        padding: 4px 13px;
        float: right;
        font-size: 12px;
        background: white;
        border: 2px #D8D8D8 solid;
    }
    .tab_on_right{
        padding: 4px 17px;
        font-size: 12px;
        color: #9A9A9A;
    }
</style>